import React, {Component} from 'react'
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts'
// 引入柱状图
import 'echarts/lib/chart/pie'
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legend'
import {Feedback} from '@icedesign/base'
import axios from 'axios'

const Toast = Feedback.toast

export default class Pie extends Component {
  constructor(props) {
    super(props)
    this.state = {
      option: {
        color: [
          '#3fa1ff',
          '#88d1eb',
          '#3dcbcb',
          '#82dfbf',
          '#50cc73',
          '#ace082',
          '#fbd542',
          '#eba675',
          '#f2637b',
          '#dd81d3',
          '#9660e5',
          '#9f8bf0'
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}个 ({d}%)'
        },
        series: [
          {
            name: '接口数',
            type: 'pie',
            radius: '70%',
            center: [
              '50%', '45%'
            ],
            // data: [{value: 335, name: '直接访问'}, {value: 310, name: '邮件营销'}, {value: 234, name: '联盟广告'}, {value: 135, name: '视频广告'}, {value: 1548, name: '搜索引擎'}],
            data: [],
            label: {
              normal: {
                show: false,
                position: 'center'
              }
            },
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
    }
  }

  componentDidMount() {
    axios.post('/api/getModelGroup').then((response) => {
      this.state.option.series[0].data = response.data;
      this.setState({option: this.state.option})
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('pie'))
      // 绘制图表
      myChart.setOption(this.state.option)
    }).catch((error) => {
      Toast.error(
        error.msg == undefined
        ? '系统错误'
        : error.msg)
    })
  }

  render() {
    return (<div id="pie" style={{
        width: 350,
        height: 250
      }}></div>)
  }
}
